import React, { Component } from 'react';
import { Input, Button, Row, Col } from 'antd';
import './style.css';
import TodoItem from './component/TodoItem';
// import axios from 'axios';
import store from './store';
// import { getInitialListItemAction } from './store/actionCreators';
import { getListItem, inputValueChange, pushArrData } from './store/actionCreators'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = {
      inputValue: '',
      list: []
    }
    this.handleClickChange = this.handleClickChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }
  render() {
    return (
      <div>
        <Row>
          <Col span={6}>
            <Input placeholder="请输入" size="small" value={this.state.inputValue} onChange={this.handleClickChange}/>
          </Col>
          <Col span={6}><Button type="primary" onClick={this.handleSubmit}>提交</Button></Col>
        </Row>
        <div>
          <ul >
            {
              this.state.list.map((item,index) => {
                return (
                  <TodoItem item={item} key={index} index={index} handleDeleteItem={this.handleDeleteItem.bind(this,index)}/>
                )
              })
            }
          </ul>
        </div>
      </div>
    )
  }
  // 改变输入框数据
  handleClickChange(e) {
    const action = inputValueChange(e.target.value)
    store.dispatch(action)
  }
  handleSubmit() {
    const arrList = [...this.state.list]
    arrList.push(this.state.inputValue)
    // const action = {
    //   type: 'array_push',
    //   value: arrList
    // }
    const action = pushArrData(arrList)
    store.dispatch(action)
  }
  handleDeleteItem(index) {
    const tempList = [...this.state.list]
    tempList.splice(index,1)
    this.setState({
      list: tempList
    })
  }
  //同步state数据
  handleStoreChange () {
    this.setState(store.getState());
  }
  componentWillMount() {
    // console.log("componentWillMount");
  }
  componentDidMount() {
    const action = getListItem()
    store.dispatch(action)
  }
  shouldComponentUpdate() {
    // console.log("shouldComponentUpdate");
    return true
  }
  componentWillUpdate() {
    // console.log("componentWillUpdate");
  }
  componentDidUpdate() {
    // console.log("componentDidUpdate");
  }
  componentWillUnmount() {
    // console.log("componentWillUnmount");
  }
}
export default TodoList;
